import { Button, Form, Input, Select, Divider, Row, Col } from 'antd';
import ProductItem from './ProductItem'
import useGetCategoriers from '../../helpers/getCategory'
import { useDispatch, useSelector } from 'react-redux'
import { search_products } from '../../store/actions/search'

function Search() {
  const dispatch = useDispatch()
  const categories = useGetCategoriers()
  const [form] = Form.useForm()
  const { results } = useSelector(state => state.search)
  const OnFinish = value => {
    dispatch(search_products(value))
    form.resetFields()
  }

  return (
    <>
      <Form
        form={form}
        onFinish={OnFinish}
        layout="inline"
        initialValues={{ category: "-1" }}
      >
        <Input.Group compact>
          <Form.Item name="category">
            <Select>
              <Select.Option value="-1">所有分类</Select.Option>
              {
                categories.map(category => (
                  <Select.Option value={category._id} key={category._id}>{category.name}</Select.Option>
                ))
              }
            </Select>
          </Form.Item>
          <Form.Item name="search">
            <Input placeholder="请输入搜索关键字" />
          </Form.Item>
          <Form.Item>
            <Button type="primary" htmlType="submit">搜索</Button>
          </Form.Item>
        </Input.Group>
      </Form>
      <Divider />
      <Row gutter={[16, 16]}>
        {
          results.map(product => (
            <Col span="6" key={product._id}>
              <ProductItem product={product} imgStyle={{width:213.88,hegiht:213.88,margin:"10px auto 0"}} />
            </Col>
          ))
        }
      </Row>
    </>
  )
}

export default Search

